<!DOCTYPE html>
<html lang="en">
<#include "../common/head.html"/>
<body>
<#include "../common/header.html"/>
<div class="con">
  <div class="col-md-6 col-md-offset-3" style="background-color: white;padding: 20px 30px">
    <#if errorMessage??>
      <div class="alert alert-info alert-dismissible fade in" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
        </button>
        ${errorMessage!}
      </div>
    </#if>
    <h3>快速留言</h3>
    <form class="form-horizontal" method="post">
      <div class="form-group">
        <label class="col-sm-3 control-label">教学楼</label>
        <div class="col-sm-8">
          <select class="form-control" id="floor" onchange="valChange()">
            <#list floorList as item>
              <option value="${item.id!}">${item.name}</option>
            </#list>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">教室</label>
        <div class="col-sm-8">
          <select name="roomId" class="form-control" id="room"></select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">内容</label>
        <div class="col-sm-8">
          <textarea name="content" class="form-control"></textarea>
        </div>
      </div>
      <button type="submit" class="col-md-offset-2 btn btn-info">留言</button>
    </form>
    <div class="clear"></div>
  </div>
</div>
<#include "../common/footer.html"/>
</body>
<script>
    function valChange() {
        var floorId = $("#floor").val();
        $.getJSON("/message/roomList", {floorId: floorId}, function (result) {
            if (result.state === "success") {
                var content = '';
                for (var i = 0; i < result.result.list.length; i++) {
                    var item = result.result.list[i];
                    content += "<option value='" + item.id + "'>" + item.name + "</option>";
                }
                $("#room").html(content);
            } else {
                alert(result.msg);
            }
        });

    }

    $("#floor").change();
</script>
</html>